<template>
  <div class="accout">
      <Bgimg>账户</Bgimg>
      <div class="account_content">
          <div class="account-left">
              <div class="account-title">
                  <span>个人中心</span>
              </div>
              <ul class="account-ui">
                  <!-- 信息栏 -->
                  <li class="account-list account-list-active" :class="{'account-list-active':accountList.active == 0}">
                        <router-link to="/account">
                            <el-icon class="account-list-icon" :size="24" :color="accountList.active == 0 ? '#fff' : '#000'">
                                <edit></edit>
                            </el-icon>
                            <span>我的信息</span>
                        </router-link>
                    </li>
              </ul>
              <!-- 退出登录 -->
              <div class="account-exit">
                <el-button type="danger" @click="exit">
                    <span>退出登录</span>
                </el-button>
              </div>
          </div>
          <div class="account-right">
              <div class="account-right-title">
                  <span class="accout-right-title-icon"></span>
                  <span class="account-right-title-text">我的信息</span>
              </div>
              <div class="user-setting-wrap">
                  <el-form :model="userInfo" ref="form" label-width="100px">
                    <el-form-item label="头像:" class="user-avatar">
                        <label for="avatar" class="avatar">
                            <el-avatar class="changeAvatar" :size="64" :src="userInfo.hdportrait"></el-avatar>
                        </label>
                        <input type="file" @change="updateAvatar" accept="image/*" name="" id="avatar" class="hide">
                    </el-form-item>
                    <el-form-item label="昵称:">
                        <el-input v-model="userInfo.nickname" placeholder="你的昵称"></el-input>
                    </el-form-item>
                    <el-form-item label="我的签名:">
                        <el-input v-model="userInfo.signature" :rows="5" resize="none" type="textarea" placeholder="设置您的签名- ( ゜- ゜)つロ"></el-input>
                    </el-form-item>
                    <el-form-item label="性别:">
                        <el-radio-group v-model="userInfo.sex" size="medium">
                            <el-radio-button class="user-setting-radio" label="男"></el-radio-button>
                            <el-radio-button class="user-setting-radio" label="女"></el-radio-button>
                            <el-radio-button class="user-setting-radio" label="保密"></el-radio-button>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item class="user-btn-wrap">
                        <div class="padding-dom"></div>
                        <div class="user-my-btn">
                            <el-button type="primary" size="medium" @click="updateHandler">保存</el-button>
                        </div>
                    </el-form-item>
                  </el-form>
              </div>
          </div>
      </div>
  </div>
</template>

<script>
import Bgimg from 'components/Bgimg.vue'
export default {
    components: {
        Bgimg
    },
    data() {
        return {
            userInfo: {
                uid: 0,
                hdportrait: "https://img.zcool.cn/community/01c8415b10ec7aa801212d57334fdc.png@1280w_1l_2o_100sh.png",
                nickname: "",
                signature: "",
                sex: "男"
            },
            accountList: {
                active: 0
            }
        }
    },
    methods: {
        getStoreUser() {
            let isLogin = this.$store.getters.getIsLogin
            for(let key in this.userInfo) {
                if(isLogin !== null && Object.keys(isLogin).includes(key)) {
                    this.userInfo[key] = this.$store.getters.getIsLogin[key]
                }
            }
        },
        async updateHandler() {
            try {
                let formData = new FormData()
                // base64转bolb数据
                let blob = this.userInfo.hdportrait
                if(!this.userInfo.hdportrait.startsWith('http') && !this.userInfo.hdportrait == '') {
                    blob = this.dataURLtoBlob(this.userInfo.hdportrait)
                }
                for(let item in this.userInfo) {
                    if(item === 'hdportrait') {
                        formData.append(item,blob)
                    }else {
                        formData.append(item,this.userInfo[item])
                    }
                }
                let {data} = await this.$http.updateUserData(this.userInfo.uid,formData)
                if(data.code == 0) {
                    // 调用vuex action中 方法 查询用户信息，存入vux
                    this.$store.dispatch('getUser')
                }
                this.$elmsg({
                    message: "修改成功！",
                    type: "success"
                })
            }catch(e) {
                this.$elmsg({
                    message: "修改失败，请稍后再试！",
                    type: "error"
                })
                console.log("更新失败,err"+e);
            }
        },
        // 更新头像
        updateAvatar(event) {
            let file = event.target.files[0]
            let reader = new FileReader()
            reader.readAsDataURL(file)
            reader.onload = (e) => {
                this.userInfo.hdportrait = e.target.result
            }
        },
        //将base64转换为blob
        dataURLtoBlob: function(dataurl) {
            var arr = dataurl.split(','),
                mime = arr[0].match(/:(.*?);/)[1],
                bstr = atob(arr[1]),
                n = bstr.length,
                u8arr = new Uint8Array(n);
            while (n--) {
                u8arr[n] = bstr.charCodeAt(n);
            }
            return new Blob([u8arr], { type: mime });
        },
        // 退出登录
        exit() {
            // 清除token
            window.localStorage.removeItem('token')
            // 清除vuex保存的状态
            this.$store.commit('setIsLogin',null)
            // 跳转首页
            this.$router.push('/')
        }
    },
    mounted() {
        // 获取vuex中的用户数据
        this.getStoreUser()
    }
}
</script>

<style scoped>
@media screen and (max-width:720px) {
    .account_content {
        width: 80% !important;
        flex-direction: column;
    }
    .account_content .account-left {
        display: flex;
    }
    .account_content .account-left > div ,
    .account_content .account-left > ul li {
        padding: 0 15px;
    }
}
.account_content {
    display: flex;     
    /* width: 60%;    */
    width: 888px;
    font-size: 16px;
    margin: var(--mtop) auto;
    border-radius: 10px;
    border: 1px solid #e7e7e7;
}
.account_content .account-left {
    flex: 1;
    background-color: #FAFAFA;
    border-right: 1px solid #ddd;
}
.account_content .account-right {
    flex: 5;
}
.account-left .account-title {
    text-align: center;
    height: 50px;
    line-height: 50px;
    color: #666;
    border-bottom: 1px solid #ddd;
}
.account-left .account-ui .account-list a {
    display: block;
    text-align: center;
    height: 48px;
    line-height: 48px;
    color: #222;
}
.account-left .account-ui .account-list-active {
    background-color: var(--baseColor);
}
.account-left .account-ui .account-list-active a {
    color: #fff;
}
.account-left .account-ui .account-list .account-list-icon {
    margin-right: 10px;
    vertical-align: middle;
}
.account-right .account-right-title .accout-right-title-icon {
    float: left;
    width: 4px;
    height: 16px;
    margin-right: 5px;
    margin-top: 16px;
    background-color: var(--baseColor);
}
.account-right .account-right-title .account-right-title-text {
    float: left;
}
.account-right .account-right-title {
    height: 50px;
    line-height: 50px;
    padding-left: 30px;
    color: var(--baseColor);
    border-bottom: 1px solid #ddd;
}
.account-right .account-right-title::after {
    content: "";
    display: block;
    clear: both;
}
.account-right .user-setting-wrap {
    padding: 20px;
}
.account-right .user-setting-wrap .user-setting-radio {
    margin: 0 5px;
}
.account-right .user-setting-wrap .user-setting-radio  :deep(.el-radio-button__inner) {
    display: inline-block;
    border: 1px solid #dcdfe6;
    padding: 5px 10px;
    border-radius: var(--el-border-radius-base) !important;
    box-shadow: 0px 0 0 0 var(--el-radio-button-checked-border-color,var(--el-color-primary));
}
.user-btn-wrap .padding-dom {
    height: 50px;
    border-bottom: 1px solid #ddd;
    margin-bottom: 50px;
}
.user-btn-wrap {
    text-align: center;
}
.user-btn-wrap  :deep(.el-form-item__content) {
    margin-left: 0 !important;
}
.user-avatar .avatar span {
    position: relative;
    cursor: pointer;
}
.user-avatar .avatar span:hover::after {
    opacity: 1;
}
.user-avatar .avatar span::after {
    position: absolute;
    top: 0;
    left: 0;
    content: "修改头像";
    width: 100%;
    height: 64px;
    font-size: 12px;
    background-color: rgba(1,1,1,.5);
    opacity: 0;
    transition: opacity .5s;
}
.user-avatar #avatar {
    position: absolute;
    visibility: hidden;
    opacity: 0;
    z-index: -1;
    pointer-events: none;
}
.account-left {
    position: relative;
}
.account-exit {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
}
.account-exit .el-button {
    width: 100%;
    font-size: 16px;
    border-radius: 0;
}
</style>